<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		svg{border:1px solid #ccc;}
	</style>
</head>
<body>


	<svg width="200" height="200" viewBox="-20 -50 100 100">
        <path d="M0 0 A20 20 0 0 1 40 0A20 20 0 0 1 0 0"
            fill="none" stroke="#00f" />

        <rect x="0" y="0" width="5" height="5" fill="#f00" fill-opacity="0.8" >
            <animateMotion 
                path="M0 0 A20 20 0 0 1 40 0A20 20 0 0 1 0 0"
				begin="t.click"
                dur="4s"  fill="freeze">
            </animateMotion>
        </rect>
       
		
		<text x="30" y="40" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我(normal)</text>
    </svg>
	
	<svg width="200" height="200" viewBox="-20 -50 100 100">
        <path d="M0 0 A20 20 0 0 1 40 0A20 20 0 0 1 0 0"
            fill="none" stroke="#00f" />

        <rect x="0" y="0" width="5" height="5" fill="#f00" fill-opacity="0.8" >
            <animateMotion 
                path="M0 0 A20 20 0 0 1 40 0A20 20 0 0 1 0 0"
                rotate="auto"
				begin="t2.click"
                dur="4s"  fill="freeze">
            </animateMotion>
        </rect>
       
		
		<text x="30" y="40" font-size="8" text-anchor="middle" id="t2" style="cursor:pointer;user-select:none">点我(auto)</text>
    </svg>
	

</body>
</html>
